{include file="application/admin/view/public/header.html" /}
<body>
  <div class="layui-fluid">
    <div class="layui-row">
      <form class="layui-form">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              商品信息
            </h3>
          </div>
          <div class="panel-body">
            <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                <span class="x-red">*</span>商品名
              </label>
              <div class="layui-input-inline">
                <input type="text" id="username" name="name" required="" lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>一口价
              </label>
              <div class="layui-input-inline">
                <input type="number" id="a_bite_price" name="price" required="" lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
                <span class="x-red"></span>商品封面图
              </label>
              <button type="button" class="layui-btn" id="uploadImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
              <input type="hidden" name="cover_img" value="" id="cover_img">
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>描述
              </label>
              <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea"
                  lay-verify="required"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>所属类型
              </label>
              <div class="layui-input-block">
                <div class="layui-input-inline layui-show-xs-block">
                  <select name="category_id">
                    <option value="0">选择分类</option>
                    {volist name='categoryData' id='value'}
                    <option value="{$value.id}">{$value.name}</option>
                    {/volist}
                  </select>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
                <span class="x-red"></span>海报
              </label>
              <button type="button" class="layui-btn" id="uploadPoster">
                <i class="layui-icon">&#xe67c;</i>上传海报
              </button>
              <input type="hidden" name="poster" value="" id="poster">
            </div>
          </div>
          <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label" data-id=""></label>
            <button class="layui-btn layui-btn-normal" lay-filter="save" lay-submit="save">保存商品信息</button>
          </div>
        </div>
      </form>
      <form action="">
        <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th><span style="color: red;">*</span>规格名称</th>
              <th><span style="color: red;">*</span>价格</th>
              <th><span style="color: red;">*</span>图片</th>
              <th><span style="color: red;">*</span>库存</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id='tbody'>
            <tr class="specifi-tr">
              <td>
                <input type="text" class="js_specifications_name" name="specifications_name" required="" lay-verify=""
                  autocomplete="off" class="layui-input">
              </td>
              <td>
                <input type="number" class="js_price" name="price" required="" lay-verify="" autocomplete="off"
                  class="layui-input">
              </td>
              <td>
                <button type="button" class="layui-btn js_uploadImg" id="uploadImg-1">
                  <i class="layui-icon">&#xe67c;</i>上传图片
                  <input type="hidden" name="" class="js-big_images">
                </button>
              </td>
              <td>
                <input type="number" class="js_stock" name="stock" required="" lay-verify="" autocomplete="off"
                  class="layui-input">
              </td>
              <td>
                <input type="text" class="js_remark" name="remark" required="" lay-verify="" autocomplete="off"
                  class="layui-input">
              </td>
              <td>
                <div class="layui-btn layui-btn-normal save-td">保存</div>
                <div class="layui-btn layui-btn-danger del-td">删除</div>
              </td>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="6">
                <div class="layui-btn layui-btn-normal" id="add-td">增加</div>
              </td>
            </tr>
          </tfoot>
        </table>

        <div class="layui-form-item">
          <button class="layui-btn layui-btn-lg  layui-btn-normal" id="finish">完成,并上架</button>
          <button class="layui-btn-lg layui-btn  layui-btn-warm">完成,但不上架</button>
          <a href="{:url('admin/goods/goodsList')}" class="layui-btn-lg layui-btn  layui-btn-danger">返回上一级</a>
        </div>
      </form>
    </div>
  </div>
  <template id="specifi-temp">
    <tr class="specifi-tr">
      <td>
        <input type="text" class="js_specifications_name" name="specifications_name" required="" lay-verify="required"
          autocomplete="off" class="layui-input">
      </td>
      <td>
        <input type="number" class="js_price" name="price" required="" lay-verify="required" autocomplete="off"
          class="layui-input">
      </td>
      <td>
        <button type="button" class="layui-btn uploadImg">
          <i class="layui-icon">&#xe67c;</i>上传图片
          <input type="hidden" name="" class="js-big_images">
        </button>
      </td>
      <td>
        <input type="number" class="js_stock" name="stock" required="" lay-verify="required" autocomplete="off"
          class="layui-input">
      </td>
      <td>
        <input type="text" class="js_remark" name="remark" required="" lay-verify="required" autocomplete="off"
          class="layui-input">
      </td>
      <td>
        <div class="layui-btn layui-btn-normal save-td">保存</div>
        <div class="layui-btn layui-btn-danger del-td">删除</div>
      </td>
      </td>
    </tr>
  </template>
  <script>
    var G_ID = null;
    layui.use(['form', 'layer', 'upload', 'table'],
      function () {
        $ = layui.jquery;
        var form = layui.form,
          layer = layui.layer,
          upload = layui.upload,
          table = layui.table;

        //自定义验证规则
        form.verify({

        });

        //上传图片
        upload.render({
          elem: '#uploadImg', //绑定元素
          url: '{:url("admin/goods/uploadImg")}', //上传接口
          done: function (res) {
            $('#cover_img').val(res.data);
            layer.msg(res.msg);
          },
          error: function () {
            //请求异常回调
          }
        });

        //上传海报
        upload.render({
          elem: '#uploadPoster', //绑定元素
          url: '{:url("admin/goods/uploadImg")}', //上传接口
          done: function (res) {
            $('#poster').val(res.data);
            layer.msg(res.msg);
          },
          error: function () {
            //请求异常回调
          }
        });

        upload.render({
          elem: '#uploadImg-1', //绑定元素
          url: '{:url("admin/goods/uploadImg")}', //上传接口
          done: function (res) {
            $("#uploadImg-1").find(".js-big_images").val(res.data);
          },
          error: function () {
            //请求异常回调
          }
        });

        function initUpload(id) {
          // debugger;
          upload.render({
            elem: id, //绑定元素
            url: '{:url("admin/goods/uploadImg")}', //上传接口
            done: function (res) {
              $(id).find(".js-big_images").val(res.data);
            },
            error: function () {
              //请求异常回调
            }
          });
        }

        //监听提交
        //保存商品信息
        form.on('submit(save)', function (data) {
          $.ajax({
            url: '{:url("admin/goods/addGoods")}',
            type: 'post',
            dataType: 'json',
            data: data.field,
            success: res => {
              if (res.code == 1) {
                layer.msg(res.msg);
                G_ID = res.data;
              } else {
                layer.alert(res.msg, {
                  icon: 5
                });
              }
            },
            error: e => { }
          });
          return false;
        });

        $('#add-td').on('click', function () {
          var html = $("#specifi-temp").html();
          $('#tbody').append(html);
          var index = $(".specifi-tr").length;
          var currer = $(".specifi-tr")[index - 1];
          var id = "uploadImg-" + index;
          $(currer).find(".uploadImg").attr("id", id)
          initUpload("#" + id);
        });

        $('#tbody').delegate('.del-td', 'click', function () {
          $(this).closest('.specifi-tr').remove();
        });

        $("#tbody").delegate(".save-td", "click", function () {
          var $rootElem = $(this).closest('.specifi-tr');
          var specifications_name = $rootElem.find(".js_specifications_name").val();
          var price = $rootElem.find(".js_price").val();
          var big_images = $rootElem.find(".js_big_images").val();
          var stock = $rootElem.find(".js_stock").val();
          var remark = $rootElem.find(".js_remark").val();
          var big_images = $(this).closest('.specifi-tr').find(".js-big_images").val();
          $.ajax({
            url: "{:url('admin/goods/saveGoodsProperty')}",
            data: {
              gid: G_ID,
              specifications_name: specifications_name,
              price: price,
              big_images: big_images,
              stock: stock,
              remark: remark
            },
            type: 'post',
            success: function (res) {
              if (res.code == 1) {
                  layer.msg(res.msg);
                } else {
                  layer.msg(res.msg);
                }
            }
          });
        })


        //完成
        $('#finish').click(function () {
          $.ajax({
            url:'{:url("admin/goods/finish")}',
            type:'post',
            dataType:'json',
            data: {
              gid: G_ID,
              type: 1
            },
            success: res => {
              if (res.code == 1) {
                layer.alert(res.msg, {
                    icon: 6
                },
                function() {
                    xadmin.father_reload();
                });
              }
            }
          });
        });

      });

        
  </script>
</body>

</html>